<template>
  <div class="home">
    <div class="header">
      <el-button type="primary" @click="openDialog">新增</el-button>
    </div>
    <div class="content">
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%" v-loading="loading">
        <el-table-column label="主标题" width="200">
          <template #default="{ row }">
            <div class="title text">{{ row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column label="次标题" width="180">
          <template #default="{ row }">
            <div class="sub__title text">
              {{ row.subtitle }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template #default="{ row }">
            <div class="desc text">{{ row.desc }}</div>
          </template> </el-table-column
        >deep
        <el-table-column label="gitee地址">
          <template #default="{ row }">
            <div class="gitee text">
              {{ row.gitee_url }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="封面图">
          <template #default="{ row }">
            <img class="poster" :src="row.poster" alt="封面" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="warning" @click="updateData(row.id)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定要删除此轮播图吗"
              @confirm="deleteData(row.id)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
              <template #actions="{ confirm, cancel }">
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button type="danger" size="small" @click="confirm">
                  确定
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 操作弹层 -->
      <el-dialog
        v-model="optionDialogVisible"
        :title="optionDoalogTitle + '轮播'"
        width="1000"
      >
        <div class="dia_content">
          <el-form :model="optionForm">
            <el-form-item label="标题" label-width="80px">
              <el-input
                type="textarea"
                v-model="optionForm.title"
                :autosize="{ minRows: 2, maxRows: 10 }"
                placeholder="请输入标题..."
              ></el-input>
            </el-form-item>
            <el-form-item label="次标题" label-width="80px">
              <el-input
                type="textarea"
                v-model="optionForm.subtitle"
                :autosize="{ minRows: 2, maxRows: 10 }"
                placeholder="请输入次标题..."
              ></el-input>
            </el-form-item>
            <el-form-item label="描述" label-width="80px">
              <el-input
                type="textarea"
                v-model="optionForm.desc"
                :autosize="{ minRows: 2, maxRows: 10 }"
                placeholder="请输入产品描述..."
              ></el-input>
            </el-form-item>
            <el-form-item label="gitee地址" label-width="80px">
              <el-input
                type="textarea"
                v-model="optionForm.gitee_url"
                :autosize="{ minRows: 2, maxRows: 2 }"
                placeholder="请输入gitee地址..."
              ></el-input>
            </el-form-item>
            <el-form-item label="封面" label-width="80px">
              <imageView
                :src="[optionForm.poster]"
                @deleteImage="deleteImage"
                @addImage="addImage"
              ></imageView>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="optionDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submit" :loading="loading"
              >确定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'

import imageView from '@/base-ui/image-view/index.vue'
import {
  addBannerApi,
  getBannerListApi,
  deleteBannerApi,
  updateBannerApi
} from '@/api'

import { normalOptions } from '@/hooks/normalOptions'

const upFile = ref<File>() // 上传的文件
const optionForm = reactive({
  // 表单数据
  title: '',
  subtitle: '',
  desc: '',
  gitee_url: '',
  poster: ''
})

// 追加数据
const additionData = (id?: number) => {
  const formData = new FormData()
  if (id) formData.append('id', id as any)
  formData.append('title', optionForm.title)
  formData.append('subtitle', optionForm.subtitle)
  formData.append('desc', optionForm.desc)
  formData.append('gitee_url', optionForm.gitee_url)
  formData.append('poster', optionForm.poster)
  formData.append('file', upFile.value as any)
  return formData
}
// 赋值数据
const assignmentData = (row: typeof optionForm) => {
  for (const key in optionForm) {
    optionForm[key as keyof typeof optionForm] = row[key as keyof typeof row]
  }
}

// 清空数据
const clearFormData = () => {
  for (const key in optionForm) {
    optionForm[key as keyof typeof optionForm] = ''
  }
}

const {
  list,
  loading,
  optionDialogVisible,
  optionDoalogTitle,
  getList,
  openDialog,
  addData,
  deleteData,
  updateData,
  submitUpdateData
} = normalOptions({
  dialogFormData: optionForm,
  upFile: upFile,
  getList: getBannerListApi,
  addData: addBannerApi,
  deleteData: deleteBannerApi,
  updateData: updateBannerApi,
  assignmentData: assignmentData,
  additionData: additionData,
  clearFormData: clearFormData
})

onMounted(() => {
  // 获得轮播图列表
  getList()
})

// 删除options中的poster
const deleteImage = () => {
  optionForm.poster = ''
}

// 选择了poster
const addImage = (f: File) => {
  upFile.value = f
  optionForm.poster = URL.createObjectURL(f)
}

// 提交表单
const submit = () => {
  if (optionDoalogTitle.value === '新增') {
    addData()
  } else if (optionDoalogTitle.value === '编辑') {
    submitUpdateData()
  }
}
</script>

<style scoped lang="less">
.home {
  .header {
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    > .el-button {
      width: 150px;
    }
  }
  .content {
    background-color: var(--bgColorTop);
    cursor: pointer;
    .text {
      color: var(--fontColorBase);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    :deep .el-table__row {
      background-color: var(--bgColorTop) !important;
    }
    :deep .el-table__cell {
      color: var(--fontColorBase);
      background-color: var(--bgColorTop) !important;
    }
    :deep .el-table__cell {
      border-bottom-color: var(--bgColorBase);
    }
    :deep .el-table__inner-wrapper::before {
      background-color: var(--bgColorTop);
    }
    :deep .el-dialog {
      background-color: var(--bgColorTop);
    }
    :deep .el-form-item__label {
      color: var(--fontColorBase);
    }
    :deep .el-textarea__inner {
      color: var(--fontColorBase);
      background-color: var(--bgColorTop);
    }
    :deep .el-dialog__title {
      color: var(--fontColorBase);
    }
    .poster {
      width: 100px;
    }
  }

  .dia_content {
    width: 100%;
    :deep .el-textarea__inner {
      resize: none;
    }
  }
}
</style>
